<template>
  <div>
    <!-- 筛选搜索功能 -->
    <SearchForm
      :currentLabel="currentLabel"
      :currentPlaceholder="currentPlaceholder"
      @submit-search="submitSearch"
    ></SearchForm>
    <!-- 添加数据列表 -->
    <addData>
      <template #btnText>
        <div>
          <el-button type="default">秒杀时间段列表</el-button>
          <el-button type="default">添加活动</el-button>
        </div>
      </template>
    </addData>
    <!--表格数据  -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" prop="id" label="编号" width="100" />
      <el-table-column align="center" prop="title" label="活动标题" />
      <el-table-column align="center" prop="recommendStatus" label="活动状态">
        <template v-slot:default="scope">
          {{ scope.row.recommendStatus ? "活动进行中" : "活动未开始" }}
        </template>
      </el-table-column>

      <el-table-column label="开始时间" prop="startDate" align="center">
        <template #default="scope">
          {{
            scope.row.startDate
              ? moment(scope.row.startDate).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column label="结束时间" prop="endDate" align="center">
        <template #default="scope">
          {{
            scope.row.endDate
              ? moment(scope.row.endDate).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="上线/下线">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="setGood(row.id)">设置商品</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      :currentPageNum="currentPageNum"
      :currentPageSize="currentPageSize"
      @changePageSize="changePageSize"
      @changePageNum="changePageNum"
    ></Pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import SearchForm from "../../components/SearchForm.vue";
import addData from "../../components/addData.vue";
import {
  FlashListApi,
  changeFlashStatusApi
} from "../../request/api";
import moment from "moment";
import Pagination from "../../components/Pagination.vue";
import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const checked1 = ref(true);
const router = useRouter();

const state = reactive<{
  tableData: {}[];
  currentLabel: string;
  currentPlaceholder: string;
  total: number;
  pageSize: number[];
  currentPageNum: number;
  currentPageSize: number;
}>({
  tableData: [],
  currentLabel: "活动名称:",
  currentPlaceholder: "活动名称",
  pageSize: [10, 20, 30], // 分页插件选择一页显示n条数据的数组
  total: 0, // 列表数据总条数
  currentPageNum: 1, // 当前显示的是第几页
  currentPageSize: 10, // 当前一页显示n条数据
});

const {
  currentLabel,
  currentPlaceholder,
  tableData,
  total,
  currentPageNum,
  currentPageSize,
  pageSize
} = toRefs(state);

// 搜索
const submitSearch = () => {};
//列表数据的请求
const FlashList = (pageNum: number = 1, pageSize: number = 5) => {
  //获取全部
  FlashListApi({
    pageNum: pageNum,
    pageSize: pageSize,
  }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.list;
      console.log(res.data);
      let { pageNum, pageSize, total } = res.data;
      currentPageNum.value = pageNum;
      currentPageSize.value = pageSize;
      state.total = total;
    }
  });
};
FlashList();

//设置商品
const setGood = (flashPromotionId: number) => {
   router.push({path: '/sms/selectSession',query:{flashPromotionId:flashPromotionId}});

};
// 修改活动上下线状态
const changeStatus = (id: number, status: number) => {
  ElMessageBox.confirm("是否要修改该状态?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(id, status);
      changeFlashStatusApi(id, {
        status,
      }).then((res) => {
        if (res.code === 200) {
          console.log("成功");
        }
      });
    })
    .catch(() => {});
};
// 分页功能按钮
// 改变页码
const changePageNum = (pageNum: number) => {
  currentPageNum.value = pageNum;
  FlashList(currentPageNum.value, currentPageSize.value);
};

// 改变一页显示n条
const changePageSize = (pageSize: number) => {
  currentPageSize.value = pageSize;
  FlashList(currentPageNum.value, currentPageSize.value);
};
</script>
<style lang="less" scoped></style>
